Custom Element
独自のHTMLタグを定義できる
JSのclassを使って定義する
web標準なので、素のJSで完結する
JSのclassを使って定義する
code:js
class MyButton extends HTMLElement {
constructor() {
super();
this.innerHTML = `
<style>
button {
border: none;
border-radius: 3px;
padding: 10px 20px;
}
</style>
<button type="button">${this.innerHTML}</button>
`;
}
}
customElements.define("my-button", MyButton);
装飾したbuttonをCustom Elementとしている
HTML上で呼び出せる
code:html
<my-button>hoge</my-button>
devtool上でもCustom Elementとして表示される
https://gyazo.com/3dfa14642196292ca0117e44dc10a153 https://meowni.ca/emoji-rain/components/emoji-rain/demo/
ちゃんとcustom elementのまま表示される
雑に言えば
ReactのComponentのようなものを、素のJSのみで定義できる
ReactのComponentの方ができることが多すぎるので、この表現はめちゃくちゃ語弊があると思うけど、雑なイメージではそうmrsekut.icon
というか、ReactのComponentと比べてどこが劣っているのかをあまり理解していない
そもそも比較するべきものでもないのかもしれない
Reactよりは命令的な印象があるmrsekut.icon
classの使用を強制されるのもあまり好きじゃないな
閉じているので、OOP感はまったくないので、よく考えればそんな問題じゃないかmrsekut.icon
素のHTMLでは、classを使い回すことで、styleを汎用化させていた
が、これをCustom Elementとして使い回すことができる
Web Componentsに内包される概念？
それとも、ただWeb Components利用されているだけで、独立の概念？
onClicke={()=>{}}みたいに外部から関数を渡すことはできない？
lifecycleがある
constructor()
componentDidMount的
componentWillUnmount的